<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
	<title>jQuery treeView</title>
	
	<link rel="stylesheet" href="../jquery.treeview.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
	<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
	<script src="../jquery.treeview.js" type="text/javascript"></script>
	
	<script type="text/javascript" src="demo.js"></script>
	
	</head>
	<body>
	
<h2><a href="http://bassistance.de/jquery-plugins/jquery-plugin-treeview/">jQuery Treeview Plugin 1.4</a> Demo</h2>

<h4>Note (Sept 19th, 08): <a href="http://www.dynamicdrive.com/dynamicindex1/treeview">Dynamic Drive specific version</a> of original main demo page.</h4>



<h3>Demo #1:</h3>

	<ul id="navigation">
		<li><a href="http://www.dynamicdrive.com">Item 1</a>
			<ul>
				<li><a href="http://www.dynamicdrive.com">Item 1.0</a>
					<ul>
						<li><a href="index.html">Item 1.0.0</a></li>
					</ul>
				</li>
				<li><a href="http://www.dynamicdrive.com">Item 1.1</a></li>
				<li><a href="http://www.dynamicdrive.com">Item 1.2</a>
					<ul>
						<li><a href="http://www.dynamicdrive.com">Item 1.2.0</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.0.0</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.0.1</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.0.2</a></li>
						</ul>
					</li>
						<li><a href="http://www.dynamicdrive.com">Item 1.2.1</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.1.0</a></li>
						</ul>
					</li>
						<li><a href="http://www.dynamicdrive.com">Item 1.2.2</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.2.0</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.2.1</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 1.2.2.2</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="http://www.dynamicdrive.com">Item 2</a>
			<ul>
				<li><span>Item 2.0</span>
					<ul>
						<li><a href="http://www.dynamicdrive.com">Item 2.0.0</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 2.0.0.0</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 2.0.0.1</a></li>
						</ul>
					</li>
					</ul>
				</li>
				<li><a href="http://www.dynamicdrive.com">Item 2.1</a>
					<ul>
						<li><a href="http://www.dynamicdrive.com">Item 2.1.0</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.0.0</a></li>
						</ul>
					</li>
						<li><a href="http://www.dynamicdrive.com">Item 2.1.1</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.1.0</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.1.1</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.1.2</a></li>
						</ul>
					</li>
						<li><a href="http://www.dynamicdrive.com">Item 2.1.2</a>
						<ul>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.2.0</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.2.1</a></li>
							<li><a href="http://www.dynamicdrive.com">Item 2.1.2.2</a></li>
						</ul>
					</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="http://www.dynamicdrive.com">Item 3</a>
			<ul>
				<li class="open"><a href="http://www.dynamicdrive.com">Item 3.0</a>
					<ul>
						<li><a href="http://www.dynamicdrive.com">Item 3.0.0</a></li>
						<li><a href="http://www.dynamicdrive.com">Item 3.0.1</a>
							<ul>
								<li><a href="http://www.dynamicdrive.com">Item 3.0.1.0</a></li>
								<li><a href="http://www.dynamicdrive.com">Item 3.0.1.1</a></li>
							</ul>
						</li>
						<li><a href="http://www.dynamicdrive.com">Item 3.0.2</a>
							<ul>
								<li><a href="http://www.dynamicdrive.com">Item 3.0.2.0</a></li>
								<li><a href="http://www.dynamicdrive.com">Item 3.0.2.1</a></li>
								<li><a href="http://www.dynamicdrive.com">Item 3.0.2.2</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>



		<p><b>Notes:</b></p>
		<ul>
			<li>All nodes collapsed explicitly by default, though overwritten by 
			persistence feature below.</li>
			<li>Only one node allowed open at any time.</li>
			<li>Animation disabled..</li>
			<li>&quot;<code>Location</code>&quot; persistence enabled, causing the branch 
			with an &quot;<code>href</code>&quot; value matching that of the current page 
			(<code>location.href</code>) to be expanded by default. In the demo 
			above, that is &quot;<b>Item 1.0.0</b>&quot;.</li>
		</ul>
		

<hr />

<h3>Demo #2:</h3>

<p><a href="#" id="samplebutton" onClick="return false">Click here</a> to add a New Folder node to the end of the existing tree</p>

<ul id="browser" class="filetree">
		<li><span class="folder">Folder 1</span>
			<ul>
				<li><span class="file">Item 1.1</span></li>
			</ul>
		</li>
		<li><span class="folder">Folder 2</span>
			<ul>
				<li><span class="folder">Subfolder 2.1</span>
					<ul id="folder21">
						<li><span class="file">File 2.1.1</span></li>
						<li><span class="file">File 2.1.2</span></li>
					</ul>
				</li>
				<li><span class="file">File 2.2</span></li>
			</ul>
		</li>
		<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
			<ul>
				<li><span class="file">File 3.1</span></li>
			</ul>
		</li>
		<li><span class="file">File 4</span></li>
	</ul>


		<p><b>Notes:</b></p>
		<ul>
			<li>No Nodes collapsed explicitly. &quot;<b>Folder 3</b>&quot; is manually 
			closed then by giving its <code>LI</code> element a &quot;<code>closed</code>&quot; 
			CSS class.</li>
			<li>Animation enabled, speed is &quot;<code>normal</code>&quot;.</li>
			<li>&quot;<code>Cookie</code>&quot; persistence enabled, causing the current 
			tree state to be persisted.</li>
			<li>Dynamically adding a sub tree to the existing tree demonsrated.</li>
		</ul>


<hr />


<h3>Demo #3:</h3>

	<div id="treecontrol">
		<a title="Collapse the entire tree below" href="#"> Collapse All</a> | 
		<a title="Expand the entire tree below" href="#"> Expand All</a> | 
		<a title="Toggle the tree below, opening closed branches, closing open branches" href="#">Toggle All</a>
	</div>

<ul id="red" class="treeview-red">
	<li><span>Item 1</span>
		<ul>
			<li><span>Item 1.0</span>
				<ul>
					<li><span>Item 1.0.0</span></li>
				</ul>
			</li>
			<li><span>Item 1.1</span></li>
			<li><span>Item 1.2</span>
				<ul>
					<li><span>Item 1.2.0</span>
					<ul>
						<li><span>Item 1.2.0.0</span></li>
						<li><span>Item 1.2.0.1</span></li>
						<li><span>Item 1.2.0.2</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.1</span>
					<ul>
						<li><span>Item 1.2.1.0</span></li>
					</ul>
				</li>
					<li><span>Item 1.2.2</span>
					<ul>
						<li><span>Item 1.2.2.0</span></li>
						<li><span>Item 1.2.2.1</span></li>
						<li><span>Item 1.2.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li><span>Item 2</span>
		<ul>
			<li><span>Item 2.0</span>
				<ul>
					<li><span>Item 2.0.0</span>
					<ul>
						<li><span>Item 2.0.0.0</span></li>
						<li><span>Item 2.0.0.1</span></li>
					</ul>
				</li>
				</ul>
			</li>
			<li><span>Item 2.1</span>
				<ul>
					<li><span>Item 2.1.0</span>
					<ul>
						<li><span>Item 2.1.0.0</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.1</span>
					<ul>
						<li><span>Item 2.1.1.0</span></li>
						<li><span>Item 2.1.1.1</span></li>
						<li><span>Item 2.1.1.2</span></li>
					</ul>
				</li>
					<li><span>Item 2.1.2</span>
					<ul>
						<li><span>Item 2.1.2.0</span></li>
						<li><span>Item 2.1.2.1</span></li>
						<li><span>Item 2.1.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="open"><span>Item 3</span>
		<ul>
			<li><span>Item 3.0</span>
				<ul>
					<li><span>Item 3.0.0</span></li>
					<li><span>Item 3.0.1</span>
					<ul>
						<li><span>Item 3.0.1.0</span></li>
						<li><span>Item 3.0.1.1</span></li>
					</ul>
					
				</li>
					<li><span>Item 3.0.2</span>
					<ul>
						<li><span>Item 3.0.2.0</span></li>
						<li><span>Item 3.0.2.1</span></li>
						<li><span>Item 3.0.2.2</span></li>
					</ul>
				</li>
				</ul>
			</li>
		</ul>
	</li>
	</ul>


		<p><b>Notes:</b></p>
		<ul>
			<li>All nodes collapsed explicitly by default.</li>
			<li>Animation enabled, speed is &quot;fast&quot;.</li>
			<li>Tree state persistence off.</li>
			<li>&quot;toggle&quot; function defined, fired each time a folder branch is 
			toggled.</li>
		</ul>

<hr />

	<h3>Other demos</h3>
	<ul>
		<li><a href="large.html">Large Tree Demo</a></li>
		<li><a href="prerendered.html">Prerendered Large Tree Demo</a></li>
		<li><a href="async.html">Async Tree Demo</a></li>
		<li><a href="simple.html">Simple Tree Demo, famfamfam theme (no lines)</a></li>
	</ul>
 
</body></html>